<!-- 清单操作菜单组件 -->
<template>
  <view class="list-actions-container">
    <u-action-sheet
      :show="show"
      :actions="actions"
      @close="onClose"
      @select="onSelect"
      :cancelText="'取消'"
      :safeAreaInsetBottom="true"
      :overlay="false"
    />
  </view>
</template>

<script>
import { IconSystem } from '@/utils/constants.js';

export default {
  name: 'ListActions',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    list: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    actions() {
      return [
        {
          name: '编辑清单',
          icon: 'edit-pen',
          color: IconSystem.iconColors['file-text']
        },
        {
          name: '添加分组',
          icon: 'plus-circle',
          color: IconSystem.iconColors['book']
        },
        {
          name: '删除清单',
          icon: 'trash',
          color: IconSystem.iconColors['shopping-cart']
        }
      ];
    }
  },
  methods: {
    // 关闭操作菜单
    onClose() {
      this.$emit('close');
    },
    
    // 选择操作
    onSelect(e) {
      try {
        const { name } = e;
        console.log('【ListActions】选择操作:', name);
        
        // 检查list对象
        if (!this.list || !this.list.id) {
          console.error('选择操作失败: 无效的清单对象', this.list);
          uni.showToast({
            title: '操作失败',
            icon: 'none'
          });
          this.onClose();
          return;
        }
        
        console.log('【ListActions】当前清单:', this.list.id, this.list.title);
        
        switch (name) {
          case '编辑清单':
            console.log('【ListActions】触发编辑清单事件');
            this.$emit('edit', this.list);
            break;
          case '添加分组':
            console.log('【ListActions】触发添加分组事件');
            this.$emit('add-group', this.list);
            break;
          case '删除清单':
            console.log('【ListActions】准备删除清单');
            this.confirmDelete();
            break;
        }
        
        this.onClose();
      } catch (error) {
        console.error('处理操作选择失败:', error);
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
        this.onClose();
      }
    },
    
    // 确认删除
    confirmDelete() {
      // 检查list是否存在
      if (!this.list || !this.list.id) {
        console.error('确认删除失败: 清单对象无效');
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
        return;
      }
      
      // 获取分组和任务数量
      let groupCount = 0;
      let taskCount = 0;
      
      // 保存清单ID，避免在回调中this.list可能为null的问题
      const listId = this.list.id;
      const listTitle = this.list.title || '未命名清单';
      
      if (this.list && this.list.groups) {
        groupCount = this.list.groups.length;
        
        // 计算任务数量 - 如果有store，可以获取任务数量
        if (this.$store && this.$store.getters) {
          this.list.groups.forEach(group => {
            try {
              const groupTasks = this.$store.getters['tasks/getTasksByGroup'](group.id) || [];
              taskCount += groupTasks.length;
            } catch (e) {
              console.error('获取任务数量失败:', e);
            }
          });
        }
      }
      
      // 构建提示消息
      let content = `确定要删除清单"${listTitle}"吗？此操作不可撤销。`;
      if (groupCount > 0 || taskCount > 0) {
        content += `\n\n此清单包含 ${groupCount} 个分组`;
        if (taskCount > 0) {
          content += `和 ${taskCount} 个任务`;
        }
        content += '，删除后将无法恢复。';
      }
      
      uni.showModal({
        title: '确认删除',
        content: content,
        confirmColor: '#db4437',
        success: (res) => {
          if (res.confirm) {
            console.log('【ListActions】确认删除清单:', listId, listTitle);
            // 直接使用保存的listId，避免this.list可能为null的问题
            if (listId) {
              this.$emit('delete', listId);
            } else {
              console.error('【ListActions】无法删除: 清单ID无效');
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.list-actions-container {
  // 样式可以根据需要调整
}
</style> 